<template>
  <div class="dashboard-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="系统概览" name="system">
    <el-row :gutter="20">
      <el-col :span="24">
            <div class="dashboard-info">
              <h3>系统信息</h3>
              <div class="stat-card-container">
                <el-card shadow="hover" class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-user"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">用户数量</div>
                    <div class="stat-value">{{userCount}}</div>
                  </div>
        </el-card>
                <el-card shadow="hover" class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-menu"></i>
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">菜单数量</div>
                    <div class="stat-value">{{menuCount}}</div>
            </div>
                </el-card>
                <el-card shadow="hover" class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-goods"></i>
            </div>
                  <div class="stat-info">
                    <div class="stat-title">产品数量</div>
                    <div class="stat-value">{{productCount}}</div>
          </div>
        </el-card>
                <el-card shadow="hover" class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-cooperation"></i>
            </div>
                  <div class="stat-info">
                    <div class="stat-title">供应商数量</div>
                    <div class="stat-value">{{supplierCount}}</div>
          </div>
        </el-card>
            </div>
            </div>
      </el-col>
    </el-row>
      </el-tab-pane>

      <el-tab-pane label="Redis监控" name="redis">
        <redis-monitor />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RedisMonitor from './RedisMonitor'

export default {
  name: 'Dashboard',
  components: {
    RedisMonitor
  },
  data() {
    return {
      activeTab: 'redis',
      userCount: 0,
      menuCount: 0,
      productCount: 0,
      supplierCount: 0
    }
  },
  mounted() {
    this.getStatisticsData()
  },
  methods: {
    // 获取仪表盘统计数据
    async getStatisticsData() {
      try {
        // 模拟数据，实际项目中可以调用后端接口获取
        this.userCount = 56
        this.menuCount = 24
        this.productCount = 89
        this.supplierCount = 15
      } catch(error) {
        console.error('获取统计数据失败', error)
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 100px);
}

.dashboard-info {
  margin-bottom: 20px;
}

.stat-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-card {
  width: calc(25% - 15px);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-icon {
  font-size: 40px;
  margin-right: 15px;
  color: #409EFF;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
}

@media screen and (max-width: 1200px) {
  .stat-card {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .stat-card {
    width: 100%;
  }
}
</style> 